<template>
  <a-avatar
    :class="avatarClasses"
    :size="size"
    :shape="rounded ? 'circle' : 'square'"
    :title="showTitle ? title : undefined"
    :src="showProfileImage && user.profileImagePath ? getProfileImageUrl(user) : undefined"
    @click="handleClick"
  >
    <template #icon>
      <span v-if="showFallback" class="fallback-text">
        {{ (user.name[0] || '').toUpperCase() }}
      </span>
    </template>
  </a-avatar>
</template>

<script>
import { getProfileImageUrl } from '$lib/utils';

export default {
  props: {
    user: {
      type: Object,
      required: true
    },
    color: {
      type: String,
      default: undefined
    },
    size: {
      type: String,
      default: 'full'
    },
    rounded: {
      type: Boolean,
      default: true
    },
    interactive: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showProfileImage: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      img: undefined,
      showFallback: true,
      colorClasses: {
        primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
        pink: 'bg-pink-400 text-immich-bg',
        red: 'bg-red-500 text-immich-bg',
        yellow: 'bg-yellow-500 text-immich-bg',
        blue: 'bg-blue-500 text-immich-bg',
        green: 'bg-green-600 text-immich-bg',
        purple: 'bg-purple-600 text-immich-bg',
        orange: 'bg-orange-600 text-immich-bg',
        gray: 'bg-gray-600 text-immich-bg',
        amber: 'bg-amber-600 text-immich-bg',
      },
      sizeClasses: {
        full: 'w-full h-full',
        sm: 'w-7 h-7',
        md: 'w-10 h-10',
        lg: 'w-12 h-12',
        xl: 'w-16 h-16',
        xxl: 'w-24 h-24',
        xxxl: 'w-28 h-28',
      }
    };
  },
  computed: {
    colorClass() {
      return this.colorClasses[this.color || this.user.avatarColor];
    },
    sizeClass() {
      return this.sizeClasses[this.size];
    },
    title() {
      return this.label || `${this.user.name} (${this.user.email})`;
    },
    interactiveClass() {
      return this.interactive
        ? 'border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-colors'
        : '';
    },
    avatarClasses() {
      return `${this.sizeClass} ${this.colorClass} ${this.interactiveClass} overflow-hidden shadow-md ${this.rounded ? 'rounded-full' : ''}`;
    }
  },
  watch: {
    user: {
      handler() {
        this.tryLoadImage();
      },
      immediate: true
    }
  },
  methods: {
    tryLoadImage() {
      if (this.img && this.user) {
        this.img.decode().then(() => {
          this.showFallback = false;
        }).catch(() => {
          this.showFallback = true;
        });
      }
    },
    handleClick() {
      if (this.interactive) {
        this.$emit('click', this.user);
      }
    }
  },
  mounted() {
    this.tryLoadImage();
  }
};
</script>

<style scoped>
.fallback-text {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-medium: true;
}

.fallback-text.text-xs {
  font-size: 0.75rem;
}

.fallback-text.text-lg {
  font-size: 1.125rem;
}

.fallback-text.text-xl {
  font-size: 1.25rem;
}

.fallback-text.text-2xl {
  font-size: 1.5rem;
}

.fallback-text.text-3xl {
  font-size: 1.875rem;
}
</style>